<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div v-loading="loading" class="baseinfo" v-cloak>
    <div style="display: flex; flex-direction: row-reverse">
      <el-button type="primary" size="small" @click="submitHandle" icon="el-icon-check">{{
        btnText
      }}</el-button>
    </div>
    <div style="display: flex">
      <el-form :model="house" label-position="right" :rules="rules" label-width="120px" size="mini" v-loading="loading">
        <el-form-item label="城市/区域">
          <city-district-selector size="small" custom-style="width: 320px" @change="districtChange"
            v-model="house.district_id"></city-district-selector>
        </el-form-item>

        <el-form-item label="小区">
          <poi-search
            placeholder="搜索小区"
            size="mini"
            custom-style="width:320px"
            :district="districtName"
            :city="cityName"
            v-model="house.sub_district_name"
            @change="poiChange"
          ></poi-search>
        </el-form-item>

        <el-form-item label="标的物">
          <el-input v-model="house.title" style="width: 320px" placeholder="" maxlength="100" minlength="5"
            show-world-limit></el-input>
        </el-form-item>

        <el-form-item label="房源地址">
          <el-input style="width: 320px" size="small" v-model="house.address" placeholder></el-input>
        </el-form-item>

        <el-form-item label="地图导航">
          <el-tag size="mini" v-if="house.latitude && house.longitude">已设置（经度: {{ house.latitude }}，纬度:
            {{ house.longitude }}）</el-tag>
          <el-tag size="mini" v-else>未设置</el-tag>
          <MapMarkerDialogButton @change="markerChange" :lat="lat" :lng="lng"></MapMarkerDialogButton>
        </el-form-item>

        <el-form-item label="朝向">
          <enumeration-selector custom-style="width:320px" v-model="house.position" size="mini" :editable="false"
            cat="house_position" />
        </el-form-item>

        <el-form-item label="状态">
          <enumeration-selector custom-style="width:320px" v-model="house.status" size="mini" :editable="false" :disabled="true"
            cat="auction_house_status" />
        </el-form-item>

        <el-form-item label="封面图">
          <image-picker width="320" height="210" v-model="house.cover"></image-picker>
          <info-tip tipText='最佳图片尺寸 宽度230px，高度180px 或同比例'></info-tip>
        </el-form-item>

        <el-form-item label="朝向">
          <enumeration-selector custom-style="width:320px" v-model="house.position" size="mini" :editable="false"
            cat="house_position" />
        </el-form-item>


        <el-form-item label="地块类型">
          <enumeration-selector custom-style="width:320px" v-model="house.fitment" size="mini" :editable="false"
            cat="house_fitment" />
        </el-form-item>

        <el-form-item label="物业类型">
          <enumeration-selector custom-style="width:320px" v-model="house.category" size="mini" :editable="false"
            cat="house_category" />
        </el-form-item>

        <el-form-item label="点赞数">
          <el-input-number v-model="house.fav_nums" :min="0" :max="999999" />
        </el-form-item>

        <el-form-item label="浏览数">
          <el-input-number v-model="house.view_nums" :min="0" :max="999999" />
        </el-form-item>

        <el-form-item label="搜索次数">
          <el-input-number v-model="house.search_nums" :min="0" :max="999999" />
        </el-form-item>

      </el-form>

      <el-form :model="house" label-position="right" :rules="rules" label-width="120px" size="mini" v-loading="loading">

        <el-form-item label="联系方式">
          <el-input
            style="width: 157px"
            v-model="house.contact_name"
            placeholder="联系人"
          ></el-input>
          <el-input
            style="width: 157px"
            v-model="house.contact_mobile"
            placeholder="联系电话"
          ></el-input>
        </el-form-item>

        <el-form-item label="面积">
          <el-input style="width: 320px" v-model="house.area" /> 平米
        </el-form-item>
        <el-form-item label="户型名称">
          <el-input style="width: 320px" v-model="house.type_name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="户型图">
          <image-picker width="150" height="100" v-model="house.type_image"></image-picker>
          <info-tip tipText='最佳图片尺寸 宽度200px，高度200px 或同比例'></info-tip>
        </el-form-item>

        <el-form-item label="保证金(元)">
          <el-input style="width: 320px" type="number" v-model="house.bond" placeholder="请输入保证金"></el-input>
        </el-form-item>

        <el-form-item label="加价幅度(元)">
          <el-input style="width: 320px" type="number" v-model="house.increase_range" placeholder="请输入加价幅度"></el-input>
        </el-form-item>

        <el-form-item label="起拍价(元)">
          <el-input style="width: 320px" type="number" v-model="house.start_price" placeholder="请输入起拍价"></el-input>
        </el-form-item>

        <el-form-item label="评估价(元)">
          <el-input style="width: 320px" type="number" v-model="house.evaluation_price" placeholder="请输入评估价"></el-input>
        </el-form-item>

        <el-form-item label="开始竞拍时间">
          <el-date-picker style="width: 320px" v-model="house.start_at" type="datetime" placeholder="选择日期时间" :disabled="true"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <info-tip tipText='开始竞拍时间设置保存后无法修改'></info-tip>
        </el-form-item>
        <el-form-item label="结束竞拍时间">
          <el-date-picker style="width: 320px" v-model="house.end_at" type="datetime" placeholder="选择日期时间" :disabled="true"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
          <info-tip tipText='结束竞拍时间设置保存后无法修改'></info-tip>
        </el-form-item>

        <el-form-item label="竞价规则">
          <el-input style="width: 320px" type="textarea" :rows="3" v-model="house.bidding_rules"
            placeholder="请输入竞价规则"></el-input>
        </el-form-item>

        <!-- <el-form-item label="公告">
          <el-input style="width: 320px" type="textarea" :rows="3" v-model="house.notice"
            placeholder="请输入公告"></el-input>
        </el-form-item>

        <el-form-item label="须知">
          <el-input style="width: 320px" type="textarea" :rows="3" v-model="house.should_known"
            placeholder="请输入须知"></el-input>
        </el-form-item> -->

        <el-form-item label="备注">
          <el-input style="width: 320px" type="textarea" :rows="3" v-model="house.remark"
            placeholder="请输入备注"></el-input>
        </el-form-item>

      </el-form>
    </div>

  </div>
</template>

<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { updateAuctionHouse, getAuctionHouseDetail } from "@/api/auctionhouse";
import { getSaleStatusList } from "@/api/sale-status-item";
import ImagePicker from "@/components/ImagePicker";
import CityDistrictSelector from "@/components/CityDistrictSelector";
import SubDistrictSelector from "@/components/SubDistrictSelector";
import MapMarkerDialogButton from "@/components/MapMarkerDialogButton";
import PoiSearch from "@/components/PoiSearch";
import { getDistrict } from "@/api/district";

export default {
  components: {
    ImagePicker,
    CityDistrictSelector,
    SubDistrictSelector,
    MapMarkerDialogButton,
    PoiSearch,
  },
  data() {
    return {
      rules: {},
      loading: false,
      districtName: "",
      cityName: "",
      inputTagVisible: false,
      inputTagValue: "",
    };
  },
  props: {
    value: { type: Object },
  },

  watch: {
    "value.district_id": function (val) {
      if (!val) {
        this.districtName = "";
        return
      }
      getDistrict(val).then((res) => {
        this.districtName = res.data.name;
        this.cityName = res.data.city.name;
      });
    },

  },

  mounted: function () {
    var _this = this;

  },

  computed: {
    ...mapGetters(["user"]),

    house: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },

    houseId: function () {
      if (this.value && this.value.id) {
        return this.value.id;
      } else {
        return null;
      }
    },

    btnText: function () {
      return this.houseId ? "保存" : "保存，并进入下一步";
    },
    houseImages: {
      get() {
        if (this.house && this.house.images) {
          return this.house.images.split("|");
        } else {
          return [];
        }
      },
      set(val) {
        this.house.images = val.join("|");
      },
    },
    lng: {
      get() {
        if (!this.house) {
          return 0;
        }
        return parseFloat(this.house.longitude);
      },
      set(val) {
        this.house.longitude = val;
      },
    },
    lat: {
      get() {
        if (!this.house) {
          return 0;
        }
        return parseFloat(this.house.latitude);
      },
      set(val) {
        this.house.latitude = val;
      },
    },
  },

  methods: {

    poiChange: function (poi) {
      console.log(poi);
      Vue.set(this.house, "sub_district_name", poi.title);
      this.house.latitude = poi.location.lat;
      this.house.longitude = poi.location.lng;
      this.house.address = poi.address;

    },

    setMapHandle: function () {
      this.$refs.setMapDialog.openDialogHandle();
    },

    markerChange: function (marker) {
      if (!marker) {
        return false;
      }

      var house = this.house;
      house.latitude = marker.lat;
      house.longitude = marker.lng;
      this.house = house;
    },

    districtChange: function (did) {
      getDistrict(did).then((resp) => {
        this.$set(this.house, "city_id", resp.data.city_id);
      });
    },

    validate: function () {
      var p = this.house;

      if (!p.district_id) {
        return [false, "请选择项目所在区域"];
      }
      if (!p.sub_district_name) {
        return [false, "请选择项目所在小区"];
      }
      if (!p.title) {
        return [false, "请输入标的物"];
      }
      if (!p.address) {
        return [false, "请输入项目地址"];
      }
      if (!p.latitude || !p.longitude) {
        return [false, "请选择地图位置"];
      }
      if (!p.start_at) {
        return [false, "请选择开始竞拍时间"];
      }
      if (!p.end_at) {
        return [false, "请选择结束竞拍时间"];
      }
      let startAtDate = new Date(p.start_at);
      let endAtDate = new Date(p.end_at);
      if (startAtDate > endAtDate) {
        return [false, "开始时间不能大于结束时间"];
      }
      if (!p.start_price) {
        return [false, "请输入起拍价"];
      }
      if (!p.evaluation_price) {
        return [false, "请输入评估价"];
      }
      if (!p.increase_range) {
        return [false, "请输入加价幅度"];
      }
      if (!p.bidding_rules) {
        return [false, "请输入竞价规则"];
      }

      if (!p.position) {
        return [false, "请输入位置"];
      }
      // if (!p.status) {
      //   return [false, "请输入状态"];
      // }
      if (!p.cover) {
        return [false, "请上传封面图"];
      }
      if (!p.fitment) {
        return [false, "请输入地块类型"];
      }
      if (!p.category) {
        return [false, "请输入类别"];
      }

      if (!p.area) {
        return [false, "请输入面积"];
      }
      if (!p.type_name) {
        return [false, "请输入户型名称"];
      }
      if (!p.type_image) {
        return [false, "请上传户型图"];
      }
      if (!p.bond) {
        return [false, "请输入保证金"];
      }
      if (!p.contact_name) {
        return [false, "请输入联系人"];
      }
      if (!p.contact_mobile) {
        return [false, "请输入联系电话"];
      }


      return [true, "ok"];

    },

    submitHandle: function () {
      this.loading = true;
      var _res = this.validate();
      this.loading = false;
      var isOk = _res[0],
        err = _res[1];
      if (!isOk) {
        this.$message.error(err);
        return false;
      }
      var data = JSON.parse(JSON.stringify(this.house));


      this.loading = true;

      updateAuctionHouse(data).then((resp) => {
        this.loading = false;
        if (resp.status === 0) {
          // this.house = resp.data
          this.$emit("change", resp.data);
          this.$message({ type: "success", message: "保存成功" });
          this.loadData();
        }
      });
    },

    loadData: function () {
      this.loading = true;
      getAuctionHouseDetail(this.houseId).then((resp) => {
        this.loading = false;
        var house = resp.data;
        this.house = house;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
